<template>
  <dialog_item :dialogTitle="'BPM平台模式配置'"  :visible.sync="dialogVisible" :isNotShowDefaultBtn="true">
    <el-main element-loading-background="rgba(0, 0, 0, 0.6)" class="el-mainContent bpm_dialog">
    <p class="smallHeader">平台模式配置</p>
    <el-form label-position="top" label-width="120px" size="small" class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="流程归属软件">{{selectedAppName}}
          </el-form-item>
        </el-col>
        <el-col :span="6" >
          <el-form-item label="accessToken">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              :placeholder="$t('placeholder_enter_content')"
              v-model="accessToken"
            ></el-input>
            
          </el-form-item>
        </el-col>
        <el-col :span="6" class="marginTop62">
          <el-form-item>
            <el-button size="small"  @click="onGenAccessTokenBtnClick">生成</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="tableData.datas" style="width: 100%"  size="mini">
          
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="流程ID" prop="id"></el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="props">
              <el-button @click="startFlow(props.row.id)" size="small">发起流程</el-button>
            </template>
          </el-table-column>
        </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="searchTableData"
            :current-page.sync="searchdata.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="prev, pager, next, total, sizes"
            background
            :total="tableData.rowCount ? tableData.rowCount : 0"
          ></el-pagination>
      </el-row>
      <el-row>
        <el-table :data="flowInstanceInfo.datas" style="width: 100%" size="mini">
          
          <el-table-column label="流程实例" prop="instanceid" width="180px"></el-table-column>
          <el-table-column label="文档Id" prop="docId" width="150px"></el-table-column>
          <el-table-column label="文档摘要" prop="summary" width="150px"></el-table-column>
          <el-table-column label="当前操作人" prop="lastAuditor" width="100px"></el-table-column>
          <el-table-column label="操作" width="400px">
            <template slot-scope="props">
              <el-button @click="deleteFlow(props.row.docId)" size="small">删除流程</el-button>
              <el-button @click="submitFlow(props.row)" size="small">提交流程</el-button>
              <el-button @click="backFlow(props.row)" size="small">回退流程</el-button>
              <el-button @click="retraceFlow(props.row)" size="small">回撤流程</el-button>

            </template>
          </el-table-column>
        </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="getFlowsInsInfo"
            :current-page.sync="searchdata2.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="prev, pager, next, total, sizes"
            background
            :total="flowInstanceInfo.rowCount ? flowInstanceInfo.rowCount : 0"
          ></el-pagination>
      </el-row>
    </el-form>
  </el-main>
  <bpmflow_dialog v-if="bpmFlowVisible" :visible.sync="bpmFlowVisible" :bpmFlowParameter="bpmFlowParameter" @ok="ok"></bpmflow_dialog>
    </dialog_item>
</template>

<script>
import bpmflow_dialog from "@/components/bpmflow_dialog.vue";

export default {
  components: {
    bpmflow_dialog
  },
  props: ["visible","selectedApp",'selectedAppName'],
  created() {
    this.loadSuperUsers();
    this.loadApps();
    this.searchTableData();
    this.getFlowsInsInfo();
    this.getDomainData()
  },

  data() {
    return { 
      accessToken: "", superusers: [], secretuser: undefined,
      applications: [],
      searchdata: {
        applicationid: "",
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      searchdata2: {
        applicationid: "",
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableData: {},
      bpmFlowVisible:false,
      
      bpmFlowParameter:{
        bpmFlowType:'start',
        applicationId:this.selectedApp,
        flowId:"",
      },
      flowInstanceInfo:[],

    };
  },

  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },

  methods: {
    ok(){
      this.getFlowsInsInfo();
    },
    onGenAccessTokenBtnClick() {
      if (this.secretuser) {
        this.$api.genAccessToken(this.secretuser, {
          onSucess: resp => {
            if (resp.status == 200 && resp.data && resp.data.errcode == 0) {
              this.accessToken = resp.data.data.accessToken;
            } else {
              this.accessToken = "ERROR";
            }
          }
        });
       }
    },

    handleSizeChange(size){
      this.searchdata.pageSize=size;
      this.searchTableData();
    },
    handleSizeChange2(size){
      this.searchdata2.pageSize=size;
      this.getFlowsInsInfo();
    },
    startFlow(id){
      this.bpmFlowVisible=true;
      this.bpmFlowParameter.bpmFlowType='start';
      this.bpmFlowParameter.flowId=id;
      this.bpmFlowParameter.accessToken=this.accessToken;

    },
    deleteFlow(id){
      let data={
        applicationId:this.selectedApp,
        accessToken:this.accessToken,
        docId:id,
      }
      if(this.accessToken==""){
        this.$message({
          showClose: true,
          message: "请先获取accessToken",
          type: "error"
        });
        return false;
      }
      this.$api.deleteFlow(data, {
        onSucess: () => {
          this.getFlowsInsInfo();
        }
      });
    },
    submitFlow(row){
      this.bpmFlowVisible=true;
      this.bpmFlowParameter.bpmFlowType='submit';
      this.bpmFlowParameter.flowId=row.flowId;
      this.bpmFlowParameter.docId=row.docId;
      this.bpmFlowParameter.instanceId=row.instanceid;
      this.bpmFlowParameter.userCodeOption=row.userArray;

      this.bpmFlowParameter.accessToken=this.accessToken;
    },
    backFlow(row){
      this.bpmFlowVisible=true;
      this.bpmFlowParameter.bpmFlowType='back';
      this.bpmFlowParameter.flowId=row.flowId;
      this.bpmFlowParameter.docId=row.docId;
      this.bpmFlowParameter.instanceId=row.instanceid;
      this.bpmFlowParameter.userCodeOption=row.userArray;

      this.bpmFlowParameter.accessToken=this.accessToken;
    },
    retraceFlow(row){
      this.bpmFlowVisible=true;
      this.bpmFlowParameter.bpmFlowType='retrace';
      this.bpmFlowParameter.instanceId=row.instanceid;
      this.bpmFlowParameter.docId=row.docId;

      this.bpmFlowParameter.userCodeOption=row.userArray;

      this.bpmFlowParameter.accessToken=this.accessToken;
    },
    searchTableData() {
      this.searchdata.applicationId = this.selectedApp;
      this.$api.getAllFlowsInfo(this.searchdata, {
        onSucess: resp => {
          this.tableData = resp.data.data;
        }
      });
    },
    getFlowsInsInfo() {
      this.searchdata2.applicationId = this.selectedApp;
      this.$api.getFlowsInsInfo(this.searchdata2, {
        onSucess: resp => {
          if(resp.data.errcode == 0){
            this.flowInstanceInfo = resp.data.data;
          }
        }
      });
    },

    loadSuperUsers() {
      this.$api.getSuperUserList(
        { name: "", loginno: "", currpage: "1", pagelines: "10000" },
        {
          onSucess: resp => {
            if (resp.status == 200 && resp.data && resp.data.errcode == 0) {
              this.superusers = resp.data.data.datas;
            }
          }
        }
      );
    },

    loadApps() {
      this.$api.getCustomAppConfig({ domainid: this.$route.query.domainid, data:{name: ""} }, { onSucess: resp => {
            if (resp.status == 200 && resp.data && resp.data.errcode == 0) {
              this.applications = resp.data.data.datas;
            }
          } });
    },
       /**
     * 获取企业域信息
     */
    getDomainData(){
      this.$api.getDomain(this.$route.query.domainid, {
        onSucess: (resp) => {
          this.secretuser = resp.data.data.secret;
        },
      });
    },
  }
};
</script>
<style lang="scss" scoped>
</style>